<template>
  <div>
    <city></city>
    <!-- 头部 -->
    <header class="home_header">
      <div class="city fl pr" @click="showCityList">
        <div>{{$store.state.name}}</div>
        <span></span>
      </div>
      <div class="sel fl pr" @click="toggleShow">
        <div hot="sel" :class="{receive:selnav}">正在热映</div>
        <div :class="{receive:!selnav}">即将上映</div>
        <span class="pa" :style="{left:moveDistance}"></span>
      </div>
    </header>
    <div v-show="selnav">
      <!-- 轮播图 -->
      <swiper></swiper>
      <hot :hotLists="hotLists"></hot>
    </div>
    <div v-show="!selnav">
      <coming :comingLists="comingLists"></coming>
      <div class="click-load-more" @click="clickLoadMore">
        <span v-show="clickLoadStatus === 'start'">点击查看更多</span>
        <div v-show="clickLoadStatus === 'loading'" class="loading-icon">
          <span>加载中</span>
          <mt-spinner
            style="display: inline-block"
            type="fading-circle"
            color="rgb(100, 100, 100)"
            :size="19"
          ></mt-spinner>
        </div>
        <span v-show="clickLoadStatus === 'complete'">已经全部显示</span>
      </div>
    </div>
    <play-video></play-video>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import swiper from "../components/Home/swiper";
import hot from "../components/Home/hot";
import city from "../components/Home/city";
import coming from "../components/Home/coming";
import playVideo from '../components/playVideo'
export default {
  data() {
    return {
      selnav: true,
      moveDistance: "5%",
      limit: 20,
      offset: 0,
      clickLoadStatus: "start",
      comingLists: [],
      loaingLists: [],
      total: 0
    };
  },
  components: {
    swiper,
    hot,
    city,
    coming,
    playVideo
  },
  computed: mapGetters(["hotLists"]),
  methods: {
    ...mapMutations([
      "pushLoadStack",
      "completeLoad",
      "showCityList",
      "pushComingList"
    ]),
    toggleShow(event) {
      event.target.getAttribute("hot") ? this.selectHot() : this.selectComing();
    },
    selectHot() {
      this.selnav = true;
      this.moveDistance = "5%";
      this.pushComingList({ lists: [] });
    },
    selectComing() {
      this.selnav = false;
      this.moveDistance = "55%";
      this.pushComingList({ lists: this.loaingLists });
    },
    getWeekDay(num) {
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      return weeks[num];
    },
    clickLoadMore() {
      if (this.clickLoadStatus != "complete") {
        this.clickLoadStatus = "loading";
        setTimeout(() => {
          this.$axios
            .get(`/movie/coming/?limit=${this.limit}&offset=${this.offset}`)
            .then(res => {
              let lists = res.data.data.data.returnValue;
              this.loaingLists = this.loaingLists.concat(lists);
              this.pushComingList({ lists: this.loaingLists });
              this.comingLists = this.sortComingData(this.loaingLists);
              this.offset = this.offset + this.limit;
              if (this.offset < this.total) {
                this.clickLoadStatus = "start";
              } else {
                this.clickLoadStatus = "complete";
              }
            }, 500);
        });
      }
    },
    sortComingData(lists) {
      let comingLists = [];
      lists.forEach(item => {
        let hasItem = false;
        for (let i = 0; i < comingLists.length; i++) {
          if (item.openTime === comingLists[i].openTime) {
            comingLists[i].movies.push(item);
            hasItem = true;
            break;
          }
        }
        if (!hasItem) {
          let comingItem = {
            openTime: "",
            day: "",
            movies: []
          };
          comingItem.openTime = item.openTime;
          comingItem.day = this.getWeekDay(new Date(item.openTime).getDay());
          comingItem.movies.push(item);
          comingLists.push(comingItem);
        }
      });
      return comingLists;
    }
  },
  created() {
    this.pushComingList({ lists: [] });
    this.pushLoadStack();
    this.$axios
      .get(`/movie/coming/?limit=${this.limit}&offset=${this.offset}`)
      .then(res => {
        let data = res.data;
        let lists = data.data.data.returnValue;
        //模拟索引数据的id号
        lists.forEach((item, index) => {
          item.mId = index;
        });
        this.loaingLists = lists;
        this.total = data.total;
        this.comingLists = this.sortComingData(lists);
        this.offset = this.offset + this.limit;
      })
      .then(this.completeLoad);
  }
};
</script>

<style>
.home_header {
  width: 100%;
  height: 40px;
  background-color: white;
  line-height: 40px;
  font-size: 14px;
}
.home_header div {
  text-align: center;
}
.city {
  width: 35%;
}
.city div {
  display: inline-block;
}
.city span {
  display: inline-block;
  margin-left: 4px;
  width: 6px;
  height: 6px;
  border-left: 1px solid #50505a;
  border-bottom: 1px solid #50505a;
  transform: rotate(-45deg);
  position: absolute;
  top: 15px;
}
.sel {
  width: 65%;
  display: -webkit-box;
}
.sel div {
  width: 50%;
}
.sel span {
  height: 3px;
  width: 40%;
  background-color: #ff4d64;
  bottom: 0;
}
.receive {
  color: #ff4d64;
}
img {
  width: 100%;
  height: 150px;
}
.click-load-more {
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #333;
  font-size: 15px;
  background-color: #fff;
  margin: 5px 0 8px;
  padding-bottom: 50px;
}
</style>
